﻿<script src="~/res/assets/plugins/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>

<div id="demo">
    <div class="row">

        <div class="col-12">
            <div class="card">
                <div class="card-body">

                    <form class="form-inline">
                        <div class="form-group">

                            <label class="form-Newlable">商品分类</label>
                            <div>
                                <input data-toggle="dropdown" type="text" class="form-control mx-sm-2  custom-select" id="Tree" name="商品分类" v-model="likeList.TBC_NAME" v-on:click="TreeClick" />
                                <ul id="TreeMenu" class="dropdown-menu col-9" role="menu" aria-labelledby="dLabel" style="border:none;width: 228px;">
                                    <li>
                                        <div id="TreeLike" style="margin-top:-9px;margin-bottom:-9px;max-height: 340px;overflow-y: auto;"></div>
                                    </li>
                                </ul>
                            </div>

                            <label for="inputPassword6" class="form-Newlable">名称/规格</label>
                            <input type="text" id="inputPassword6" class="form-control mx-sm-2" v-model="likeList.NAME_SPEC">

                            <input type="checkbox" id="TBG_STATUS" v-model="likeList.TBG_STATUS_LIKE">
                            <label class="mx-sm-2" for="TBG_STATUS">启用</label>

                            <button type="button" class="btn waves-effect waves-light btn-success " v-on:click="Query"><i class="fa fa-search"></i> 查询</button>
                            <button type="button" class="btn waves-effect waves-light btn-info mx-sm-2" v-on:click="OpenMode()"><i class="fa fa-plus"></i> 新增</button>
                        </div>
                    </form>

                    <p />
                    <div class="table-responsive">
                        <table class="table  table-striped">
                            <thead>
                                <tr>
                                    <th>商品分类</th>
                                    <th>商品名称</th>
                                    <th>商品规格</th>
                                    <th>计量单位</th>
                                    <th>状态</th>
                                    <th class="text-nowrap">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="x in UserList">
                                    <td>{{x.TBC_NAME}}</td>
                                    <td>{{x.TBG_NAME}}</td>
                                    <td>{{x.TBG_SPEC}}</td>
                                    <td>{{x.TBG_NUIT}}</td>
                                    <td>
                                        <span v-bind:class="[x.TBG_STATUS_TEXT =='启用' ? 'label label-info' : 'label label-danger']">
                                            {{x.TBG_STATUS_TEXT}}
                                        </span>
                                    </td>
                                    <td class="text-nowrap">
                                        <a data-toggle="tooltip" data-original-title="Edit" v-on:click="OpenMode(x)"> <i class="fa fa-pencil text-inverse m-r-10"></i> </a>
                                        <a data-toggle="tooltip" data-original-title="Close" v-on:click="Delete(x)"> <i class="fa fa-close text-danger"></i> </a>
                                    </td>
                                </tr>

                                <tr v-if="UserList.length == 0">
                                    <td colspan="6" style="text-align:center"><h4>暂无数据</h4></td>
                                </tr>

                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <div id="UserModal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <form class="modal-content" novalidate>
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">商品信息</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div>
                    <div class="form-body">

                        <div class="row">
                            <div class="col-lg-12">
                                <div class="card-outline-info">

                                    <div class="card-body">

                                        <div class="form-body">

                                            <div class="row">
                                                <div class="form-inline  col-md-12">
                                                    <label class="form-Newlable">商品分类<span class="text-danger">*</span></label>
                                                    <div>
                                                        <input type="text" class="form-control" v-model="GridData.TBC_DID" hidden />
                                                        <input data-toggle="dropdown" type="text" class="form-control mx-sm-2  custom-select" id="Tree" v-model="GridData.TBC_NAME" v-validate="'required'" name="商品分类" readonly  v-on:click="TreeClick(1)"/>
                                                        <ul id="DataTreeMenu" class="dropdown-menu col-9" role="menu" aria-labelledby="dLabel" style="border:none;width: 228px;">
                                                            <li>
                                                                <div id="knowledgeTree" style="margin-top:-9px;margin-bottom:-9px;max-height: 340px;overflow-y: auto;"></div>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('商品分类') }}</span>
                                            </div>


                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">商品名称<span class="text-danger">*</span></label>
                                                    <input type="text" v-validate="'required'" name="商品名称" class="form-control mx-sm-2" v-model="GridData.TBG_NAME">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('商品名称') }}</span>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">商品规格<span class="text-danger">*</span></label>
                                                    <input type="text" v-validate="'required'" name="商品规格" class="form-control mx-sm-2" v-model="GridData.TBG_SPEC">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('商品规格') }}</span>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">市场价格<span class="text-danger">*</span></label>
                                                    <input type="number" v-validate="'required'" name="市场价格" class="form-control mx-sm-2" v-model="GridData.TBG_PRICE">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('市场价格') }}</span>
                                            </div>

                                            <div class="row m-t-10">
                                                <div class="form-inline col-md-12">
                                                    <label class="form-Newlable">计量单位<span class="text-danger">*</span></label>
                                                    <select class="form-control custom-select mx-sm-2 col-md-8" v-validate="'required'" name="计量单位" v-model="GridData.TBG_NUIT">
                                                        <option v-for="y in UnitList">{{y.TBU_NAME}}</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <span style="color:red;text-align:right" v-cloak class="col-md-9">{{ errors.first('计量单位') }}</span>
                                            </div>



                                            <div class="row m-t-10" v-if="GridData.TBG_DID!=''">
                                                <div class="col-md-12">

                                                    <label class="form-Newlable">状态</label>

                                                    <input type="radio" id="one" value="0" v-model="GridData.TBG_STATUS">
                                                    <label for="one">启用</label>

                                                    <input type="radio" id="two" value="1" v-model="GridData.TBG_STATUS">
                                                    <label for="two">停用</label>

                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn waves-effect waves-light btn-primary btn-info" v-on:click="saveData">保存</button>
                    <button type="button" class="btn waves-effect waves-light btn-default btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </form>
        </div>
    </div>


</div>



<script type="text/javascript">
    Vue.use(VeeValidate);
    VeeValidate.Validator.localize('zh_CN');

    VeeValidate.Validator.localize({
        zh_CN: {
            messages: {
                required: function (name) { return name + "不能为空"; },
                email: function () { return "邮箱格式无效"; }
            }
        }
    });
    var vm = new Vue({
        el: "#demo",
        data: {
            likeList: { TBC_NAME: "", NAME_SPEC: "", TBG_STATUS_LIKE: true },
            UserList: [],
            UnitList: [],
            GridData: {
                TBG_DID: "",
                TBG_NAME: "",
                TBG_SPEC: "",
                TBC_DID: "",
                TBG_STATUS: "0",
                TBG_PRICE: ""
            }
        },
        mounted: function () {
            this.Query();

            $.post("../Essential/Unit?act=data",
                function (data) {
                    data = JSON.parse(data);
                    for (var i = 0; i < data.data.length; i++) {
                        vm.UnitList.push(data.data[i]);
                    }
                });

            $("ul.dropdown-menu").on("click", function (e) {
                e.stopPropagation();
            });
            

            var _self = this;
            _self.UserList = [];
            $.post("../Essential/Categories?act=data",
                function (TreeData) {
                    TreeData = JSON.parse(TreeData);
                    TreeData = eval('([' + TreeData.data + '])');

                    $('#knowledgeTree').treeview({
                        levels: 1,
                        selectedBackColor: "#03a9f3",
                        onhoverColor: "rgba(0, 0, 0, 0.05)",
                        expandIcon: 'ti-plus',
                        collapseIcon: 'ti-minus',
                        nodeIcon: 'fa fa-folder',
                        showTags: true,
                        showHtml: false,
                        data: TreeData,
                        onNodeSelected: function (event, data) {
                            vm.GridData.TBC_DID = data.id;
                            vm.GridData.TBC_NAME = data.text;

                            $('#DataTreeMenu').slideUp();
                        }
                    });


                    $('#TreeLike').treeview({
                        levels: 1,
                        selectedBackColor: "#03a9f3",
                        onhoverColor: "rgba(0, 0, 0, 0.05)",
                        expandIcon: 'ti-plus',
                        collapseIcon: 'ti-minus',
                        nodeIcon: 'fa fa-folder',
                        showTags: true,
                        showHtml: false,
                        data: TreeData,
                        onNodeSelected: function (event, data) {
                            vm.likeList.TBC_NAME = data.text;

                            $('#TreeMenu').slideUp();
                        }
                    });

                });

        },
        methods: {
            TreeClick: function (type) {
                if (type == '1') {
                    $('#DataTreeMenu').slideDown();
                } else {
                    $('#TreeMenu').slideDown();
                }
            },
            Query: function () {
                $(".preloader").fadeIn();//加载等待
                var _self = this;
                _self.UserList = [];
                $.post("../Essential/Goods?act=data", this.likeList,
                    function (data) {
                        data = JSON.parse(data);
                        for (var i = 0; i < data.data.length; i++) {
                            _self.UserList.push(data.data[i]);
                        }
                        $(".preloader").fadeOut();//取消加载等待
                    });
            },
            Delete: function (moX) {
                swal({
                    title: "确定要删除吗?",
                    text: "",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    closeOnConfirm: false,
                    closeOnCancel: true
                }, function (isConfirm) {
                    if (isConfirm) {
                        $.post("../Essential/Goods", { act: 'delete', TBG_DID: moX.TBG_DID },
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    //moX.TBG_STATUS = state;
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                } else {
                                    swal("操作失败!", data.message);
                                }
                            });
                    }
                });
            },
            OpenMode: function (moX) {

                if ($('#knowledgeTree').treeview('getSelected').length > 0) {
                    $('#knowledgeTree').treeview('toggleNodeSelected', [$('#knowledgeTree').treeview('getSelected')[0].nodeId, { silent: true }]);
                }

                if (moX == undefined) {
                    for (var j in this.GridData) {
                        this.GridData[j] = "";
                    }
                    this.GridData.TBG_STATUS = "0";
                } else {

                    var CNode = $('#knowledgeTree').treeview('search', [moX.TBC_NAME, {
                        ignoreCase: true,
                        exactMatch: true,
                        revealResults: true,
                    }]);

                    $('#knowledgeTree').treeview('selectNode', [CNode[0].nodeId, { silent: true }]);

                    this.GridData = Object.assign({}, moX);
                }

                $('#UserModal').modal('toggle');
            },
            saveData: function () {

                this.$validator.validateAll().then((result) => {
                    if (result) {
                        $.post("../Essential/Goods?act=save", this.GridData,
                            function (data) {
                                data = JSON.parse(data);
                                if (data.status === 0) {
                                    swal("操作成功!", "", "success");
                                    vm.Query();
                                    $('#UserModal').modal('toggle');
                                } else {
                                    swal("提示!", data.message);
                                }
                            });
                    }
                })

            }
        }
    });
</script>
